<template>
  <div class="xuncha-admin">
    <div class="content-wrapper">
      <!-- 左侧统计卡片 -->
      <div class="left-panel">
        <a-spin :spinning="dataListLoading">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card class="stat-card">
                <div class="card-content">
                  <div class="title">
                    <a-icon type="arrow-up" class="red-icon" />
                    总上报案件
                  </div>
                  <div class="number">{{ dataList.allCaseCount }}</div>
                  <div class="desc">截至目前总数据</div>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="stat-card">
                <div class="card-content">
                  <div class="title">
                    <a-icon type="eye" class="blue-icon" />
                    总跟踪案件
                  </div>
                  <div class="number">{{ dataList.allDocCount }}</div>
                  <div class="desc">截至目前总数据</div>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="stat-card">
                <div class="card-content">
                  <div class="title">
                    <a-icon type="clock-circle" class="blue-icon" />
                    总归档案件
                  </div>
                  <div class="number">{{ dataList.allOverCount }}</div>
                  <div class="desc">截至目前总数据</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-spin>
      </div>

      <!-- 右侧数据统计面板 -->
      <div class="right-panel">
        <a-card class="data-panel">
          <div class="panel-header">
            <div class="tabs">
              <a-radio-group
                v-model="currentTab"
                button-style="solid"
                @change="handleTabChange"
              >
                <a-radio-button value="DAY">今日数据</a-radio-button>
                <a-radio-button value="MONTH">本月数据</a-radio-button>
                <a-radio-button value="YEAR">本年数据</a-radio-button>
              </a-radio-group>
            </div>
            <a-range-picker
              style="width: 200px"
              v-model="dateRange"
              :placeholder="['开始日期', '结束日期']"
              valueFormat="YYYY-MM-DD"
              @change="onChange"
            />
          </div>

          <a-spin :spinning="spinning">
            <a-row :gutter="16" class="stat-numbers">
              <a-col :span="5">
                <div class="stat-item">
                  <div class="value">{{ statisticsData.allDocCount || 0 }}</div>
                  <div class="label">审核案件数</div>
                </div>
              </a-col>
              <a-col :span="5">
                <div class="stat-item">
                  <div class="value">
                    {{ statisticsData.newCaseCount || 0 }}
                  </div>
                  <div class="label">新增案件数</div>
                </div>
              </a-col>
              <a-col :span="5">
                <div class="stat-item">
                  <div class="value">
                    {{ statisticsData.newOverCount || 0 }}
                  </div>
                  <div class="label">新上报案件数</div>
                </div>
              </a-col>
              <a-col :span="5">
                <div class="stat-item">
                  <div class="value">{{ statisticsData.overCount || 0 }}</div>
                  <div class="label">结案数</div>
                </div>
              </a-col>
              <a-col :span="4">
                <div class="stat-item">
                  <div class="value">{{ statisticsData.overPecent || 0 }}%</div>
                  <div class="label">结案比率</div>
                </div>
              </a-col>
            </a-row>
          </a-spin>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "XunchaAdmin",
  data() {
    return {
      currentTab: "DAY",
      queryData: {
        startTime: dayjs().format("YYYY-MM-DD"),
        endTime: dayjs().format("YYYY-MM-DD"),
        // interval: "DAY",
      },
      dataList: {},
      statisticsData: {},
      spinning: false,
      dataListLoading: false,
    };
  },
  computed: {
    dateRange() {
      return [this.queryData.startTime, this.queryData.endTime];
    },
  },
  mounted() {
    this.getQuery();
    this.getData();
  },
  methods: {
    onChange(val) {
      this.queryData.startTime = val[0];
      this.queryData.endTime = val[1];
      this.getData();
    },
    handleTabChange(val) {
      let type = val.target.value;
      this.queryData.interval = type;

      // 根据选择的类型设置日期范围
      switch (type) {
        case "DAY": // 今日
          this.queryData.startTime = dayjs().format("YYYY-MM-DD");
          this.queryData.endTime = dayjs().format("YYYY-MM-DD");
          break;
        case "MONTH": // 本月
          this.queryData.startTime = dayjs()
            .startOf("month")
            .format("YYYY-MM-DD");
          this.queryData.endTime = dayjs().endOf("month").format("YYYY-MM-DD");
          break;
        case "YEAR": // 本年
          this.queryData.startTime = dayjs()
            .startOf("year")
            .format("YYYY-MM-DD");
          this.queryData.endTime = dayjs().endOf("year").format("YYYY-MM-DD");
          break;
      }

      this.getData();
    },
    // 统计
    getQuery() {
      this.dataListLoading = true;
      this.$axios
        .post("/government-platform-center/case/getCaseCount")
        .then((res) => {
          if (res.data.code === 0) {
            this.dataList = res.data.data;
          }
        })
        .finally(() => {
          this.dataListLoading = false;
        });
    },
    // 今日、本月、本年
    getData() {
      this.spinning = true;
      const params = new URLSearchParams();
      for (const key in this.queryData) {
        params.append(key, this.queryData[key]);
      }
      this.$axios
        .post("/government-platform-center/case/getCaseCountSum", params)
        .then((res) => {
          this.statisticsData = res.data.data;
        })
        .finally(() => {
          this.spinning = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.xuncha-admin {
  padding: 24px;
  height: 100%;

  .content-wrapper {
    display: flex;
    gap: 24px;
    height: 100%;

    .left-panel,
    .right-panel {
      flex: 1;
      min-width: 0; // 防止flex子项溢出
    }

    .left-panel {
      .ant-card {
        height: 100%;
      }
    }

    .right-panel {
      .data-panel {
        height: 148px;
      }
    }
  }

  .stat-card {
    .card-content {
      .title {
        font-size: 14px;
        color: #000;
        margin-bottom: 16px;

        .red-icon {
          color: #ff4d4f;
          margin-right: 8px;
        }

        .blue-icon {
          color: #0052d9;
          margin-right: 8px;
        }
      }

      .number {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .desc {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .data-panel {
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .stat-numbers {
      .stat-item {
        text-align: center;

        .value {
          font-size: 24px;
          font-weight: bold;
          color: #0052d9;
          margin-bottom: 8px;
        }

        .label {
          font-size: 12px;
          // color: rgba(0, 0, 0, 0.65);
          color: #000;
        }
      }
    }
  }
}
</style>
